<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>内置指令  v-text</title>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>

<body>
    <!-- 
        学过的内置指令
            一：v-bind  :   单向绑定解析表达式   可简写成：  ：xxx
            二：v-model :   双向数据绑定
            三：v-for   :   遍历数组/对象/字符串
            四：v-on    :   绑定事件监听，可简写成  @
            五：v-if    :   条件渲染(动态控制节点是否存在)
            六：v-else    :   条件渲染(动态控制节点是否存在)
            七：v-show    :   条件渲染(动态控制节点是否展示)

        v-text 指令：
            一:作用，向其所在的节点中渲染文本内容。
            二：与插值语法的区别，v-text会替换掉节点中的内容， {{xx}}则不会。
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
       <div>{{name}}</div>
       <div v-text="name"></div>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止 vue在启动时生成生产提示    

        

        const vm = new Vue({
            el: '#root',
            data: {
                name: '徐亚远',
                msg: '你好，xyy'
            },
        })
    </script>


</body>

</html>